<template>
  <div style="padding: 40px">
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="通知ID" width="100px" />
      <!-- <el-table-column  label="地址信息" >
        <template #default="scope">
          {{ addressFormat(scope.row.addressId)  }}
        </template>
      </el-table-column> -->
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">审核通过</el-tag>
          <div v-else>
            <el-tag type="warning">审核未通过</el-tag>
            <div> 原因：{{ scope.row.reviewComment }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="费用">
        <template #default="scope">
          {{ scope.row.price }}-支付豆
        </template>
      </el-table-column>
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentStartTime) }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentEndTime) }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="宠物" >
        <template #default="scope">
          {{ petFormat(scope.row.petId) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="description" label="描  述" />
      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
     
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit1(scope.row)">审核</el-button>
          <!-- 删除按钮 -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="新增预约" width="50%" :before-close="handleClose">
      <el-form :model="form" label-width="120px" ref="validateFormRef">
        <el-form-item label="选择地址">
          <el-select v-model="form.addressId" placeholder="请选择">
            <el-option v-for="item in addressList" :key="item.address" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择宠物">
          <el-select v-model="form.petId" placeholder="请选择">
            <el-option v-for="item in petList" :key="item.petId" :label="item.petName" :value="item.petId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="form.appointmentStartTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker v-model="form.appointmentEndTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描  述">
          <el-input v-model="form.description" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="form.price" :min="1" label="价格"></el-input-number>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible1" title="审核" width="30%">
      <el-form :model="form1" label-width="120px">

        <el-form-item label="状态">
          <el-select v-model="form1.status" placeholder="请选择">
            <el-option key="1" label="审核通过" value="1">
            </el-option>
            <el-option key="2" label="审核不通过" value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="form1.reviewComment" style="width: 60%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-pagination class="page" @current-change="handleCurrentChange" :current-page.sync="currentPage" background
      :page-size="10" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAppointment,getAppointmentReview,getAppointmentReviews,getAppointmentMyList} from '@/http/appointment.js'
import { getAddressList } from '@/http/address'
import { PostPetList } from '@/http/pet.js'
export default {
  data() {
    return {
      form: {
        addressId: null,
        appointmentEndTime: "",
        appointmentStartTime: "",
        description: "",
        price: 1,
        petId: null,
      },
      form1: {
        appointmentId: null,
        reviewComment: null,
        status: null
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      tableData: [],
      total: 1,
      addressList: [],
      petList : []
    }

  },
  created() {
    this.load()
  },

  methods: {
    timeFormat(time) {
      const date = new Date(time);

      // 获取年、月、日、小时和分钟
      const year = date.getUTCFullYear();
      const month = date.getUTCMonth() + 1; // getUTCMonth() 返回 0-11，所以需要加 1
      const day = date.getUTCDate();
      const hours = date.getUTCHours();
      const minutes = date.getUTCMinutes();

      // 构建格式化的字符串
      return `${year}年${month}月${day}日${hours}点${minutes}分`;
    },
    handleClose() {
      this.form = {
        addressId: null,
        appointmentEndTime: "",
        appointmentStartTime: "",
        description: "",
        price: 1,
        petId: null,
      }
      this.dialogVisible = false
    },
    addressFormat(id) {
      // debugger
      if (id == null) {
        return '未设置地址'
      }
      const address = this.addressList.find(item => {
        if (item.value == id) {
          return item
        }
      })
      console.log(this.addressList);
      
      console.log(id);
      
      console.log(address);
      
      return address.label ? address.label : '未设置地址'
    },
    petFormat(id) {
      if (id  == null) {
        return '未设置宠物'
      }
      const pet = this.petList.find(item => item.petId === id)
      return pet ? pet.petName : '未设置宠物'
    },
    handleEdit1(row) {
      this.dialogVisible1 = true
      this.form1.appointmentId = row.appointmentId
    },
    async load() {
      let res = null
      const res1 =  await getAddressList()
      const res2 = await PostPetList({
        current: 1,
        size: 1000
      })
      res1.data.forEach(element => {
        let address = JSON.parse(element.address)
        this.addressList.push({
          label: `省：${address.province || ''}，市：${address.city|| ''}，区：${address.area|| ''}，详细地址：${address.detailAddress || ''}，电话：${address.phone || ''}`,
          value: element.addressId
        })
      });
      this.petList = res2.data.records
        res = await getAppointmentReviews({
          current: this.currentPage,

        })
      this.tableData = res.data.records
      this.total = Number(res.data.total)
    },
    add() {
      this.dialogVisible = true
    },
    // 确认添加
    async save() {
      console.log(this.form1);
      
      const { code, message } = await getAppointmentReview(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "审核成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "审核失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form = { ...row }
      this.dialogVisible = true
    },
    // 确认修改
    async saveEdit() {
      const { code, message } = await getAppointment(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    async handleDelete(id) {
      console.log(id);

      const { code, message } = await getCategoriesDelete({ id: id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>